<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.xjw-radio {
  height: 72upx;
  text-align: center;
  background: #f4f4f4;
  border-radius: 4upx;
  font-size: 26upx;
  text-align: center;
  line-height: 68upx;
  box-sizing: border-box;
  border: 2upx solid transparent;
  @include text-overflow;
  color: $f606266;
  &.is-disabled {
    background: #999;
    color: #666;
    border-color: transparent !important;
  }
  &--check {
    background: $thin-base-color;
    border-color: $base-color;
    color: $base-color;
  }
}
</style>
<template>
  <view
    @tap.stop="click"
    class="xjw-radio"
    :style="[itemStyle]"
    :class="{ 'xjw-radio--check': isCheck, 'is-disabled': disabled }"
  >
    <slot></slot>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop, Inject, Watch } from "vue-property-decorator";
import { isObject } from "../lib/function/index";

@Component
export default class Index extends Vue {
  @Prop({ type: [Number, String, Object, Boolean] }) checkValue;
  @Prop({ type: String }) keyValue;
  @Prop({ type: Boolean, default: false }) disabled;

  @Inject()
  group;

  isCheck: boolean = false;

  get itemStyle() {
    return this.group.style;
  }

  @Watch("group.value", {
    immediate: true,
    deep: true
  })
  WatchGroupValue(newValue, ordValue) {
    if (this.keyValue) {
      if (!isObject(this.checkValue)) {
        // eslint-disable-next-line no-console
        console.error(
          `传入了keyValue即为对象模式,但是传入的是${
            Array.isArray(this.checkValue) ? "数组" : typeof this.checkValue
          } `
        );
      } else {
        if (newValue[this.keyValue] === this.checkValue[this.keyValue]) {
          this.isCheck = true;
        } else {
          this.isCheck = false;
        }
      }
    } else {
      if (newValue === this.checkValue) {
        this.isCheck = true;
      } else {
        this.isCheck = false;
      }
    }
  }

  click() {
    if (!this.disabled) {
      this.group.$emit("childCheckChange", this.checkValue);
    }
  }
}
</script>
